<script>
// 导入处理表格文件的插件
import * as XLSX from 'xlsx'

export default {
  data () {
    return {
      // 用来放导入的数据用的
      tableData: []
    }
  },
  methods: {
    importClick () {
      // console.log(this.$refs.inp);
      // 点击选择文件的时候调用 input 的点击事件，实现选择文件
      this.$refs.inp.click()
    },
    importChange (event) {
      // 选中文件后的回调函数
      // console.log(event.target.files[0]);
      // 1. 获取到我们选中的文件
      const file = event.target.files[0]
      // 2. 创建文件的加载器
      const reader = new FileReader()
      // 3. 将文件读取成数据流
      reader.readAsBinaryString(file)
      reader.onload = () => {
        // console.log(reader.result);
        // 4. 通过数据流将文件转换成 js 对象
        const box = XLSX.read(reader.result, { type: 'binary' })

        // 5. 将工作表1 中的数据提取出来
        let res = box.Sheets['工作表1']

        // 6. 将工作表1 中的内容转换成 json 数据
        res = XLSX.utils.sheet_to_json(res)

        // 7. 将数据渲染出来
        this.tableData = res
        // console.log(res);
      }

    }
  },
}
</script>
<template>
  <div>
    <h5>文件导入</h5>

    <el-button @click="importClick">选择文件</el-button>
    <!-- 在 type 是 file 的时候，会在选择文件后调用 change 事件 -->
    <input ref="inp" hidden @change="importChange" type="file">

    <el-table :data="tableData">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="图片">
        <template #default="scope">
          <div>
            <el-image :src="scope.row.img1"></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="分类" prop="category"></el-table-column>
      <el-table-column label="名称" prop="proname"></el-table-column>


    </el-table>
  </div>
</template>
<style scoped lang="scss">
.el-image {
  width: 100px;
}
</style>
